
<style>
	@import "../../common/css/index.css";
	@import "../../common/components_css/goods_list_info.css";
</style>

<template>
	
	<view class="main">
		<!--顶部吸顶-->
		<view class="home_top_title" @click="select_map">
			<image src="../../static/dizhi.png" mode="aspectFit" class="address_img"></image>
			<span class="address_title">{{selScsName}}</span>
			<image src="../../static/reback.png" mode="aspectFit" class="reback"></image>
		</view>
		<!-- 此处为了让reload时不自动滚动到顶部，
		需要设置auto-clean-list-when-reload和auto-scroll-to-top-when-reload为false，
		即在reload时关闭自动清空数组和自动滚动到顶部 -->
		<z-paging ref="paging" 
		fixed 
		:auto-clean-list-when-reload="false" 
		:auto-scroll-to-top-when-reload="false"
		 refresher-threshold="160rpx" 
		 :refresher-status.sync="refresherStatus" 
		 @query="queryList"
		 :list.sync="goodsList"
		 @scrollTopChange="scrollTopChange"
		 class="content_info" 
		 style="height: 100%">
			<!--轮播附近门店+搜索-->
			<view class="home_main_content">
				<span class="home_main_title">{{store_title}}</span>
				<cg-swiper 
				:swiperHeight="cgSwiperHeight"
				:cgSwiperOpacity="cgSwiperOpacity" 
				:swiperList="swiperList" 
				:swiperPage="swiperPage" 
				:isShowBorder="isShowBorder" 
				@clickItem="clickItem" 
				style="width: 100%;float: left;">
				</cg-swiper>
				<span class="buy_for_me">帮我购买</span>
				<view class="search_content">
					<textarea class="search_textarea" @focus="getFocus" @blur="getBlur" @input="changeVal" placeholder="请输入店内商品名称进行搜索" :value="inputText"></textarea>
					<view
					v-if="is_search_tip"
					class="yes_display"
					>
					<!-- 	<image class="tip_icon" src="../../static/edit.png" mode="aspectFill"></image>
						<span class="search_tip">请输入店内商品名称进行搜索</span> -->
					</view>
					
					<view class="search_btn" @click="searchGoods(1)">
						搜索商品or跑腿下单
					</view>
				</view>
			</view>
			<!-- 小程序中直接修改组件style为position: sticky;无效，需要在组件外层套一层view -->
			<view style="z-index: 100;position: sticky;top :140rpx;">
				<view class="sticky-item"
				v-if="goodsList.length > 0 && isShowSearchBtn"
				>
					<view class="sticky_header_search">
						<input type="text"  v-model="inputText" class="search_txt" />
						<view class="go_search_btn" @click="searchGoods(0)">搜索</view>
					</view>
				</view>
			</view>
			<!-- 自定义下拉刷新view -->
			<!-- 注意注意注意！！如果您的项目不是QQ小程序或字节跳动小程序，:status="refresherStatus有更简化的写法，请参阅custom-demo.vue -->
			<empty-view slot="empty"></empty-view>
			<custom-refresher slot="refresher" :status="refresherStatus"></custom-refresher>
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="content-list"
			:style="[cartNumber > 0  ? {marginBottom:236 + 'rpx'} :0]">
				<view class="goods-item" v-for="(item,index) in goodsList" :key="index" @click="detail(item)">
					<image :src="item.goodsPic" @load="imgOnLoad"></image>
					<view class="goods-item-content">
						<view class="goods-title text-line-hide">{{item.goodsName}}</view>
						<view class="goods-little-title gary-font text-line-hides" v-if="item.goodsDescribe != null">{{item.goodsDescribe}}</view>
						<!--判断是否有描述，变更无描述的样式-->
						<view class="goods-amount" >
							<span class="symbol">￥</span>
							<text space="emsp">{{item.price}}</text>
							<lcNumber :value="item.num" :min="0" :disabled="true" :step="1" @cut="cutGoods($event,item)" @add="addGoods($event,item)"></lcNumber>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		<!--内容 end-->
		<!--购物车数量及金额-->
		<cartBottom 
		v-if="cartNumber > 0"
		:cart_number = "cartNumber"
		:cart_amount = "cartMoney"
		@goToPayOrder = "goToPayOrder"
		></cartBottom>
		<!--正在进行的订单-->
		<orderProgress></orderProgress>
		<!--底部导航-->
		<tabBar :pagePath="'/pages/index/index'"></tabBar>
	</view>
</template>
<script>
	import cgSwiper from '@/components/cg-swiper/cg-swiper.vue';
	import orderProgress from '@/components/order-progress/order_progress.vue'
//	import tuiSticky from "@/components/better-sticky/better-sticky.vue"
	// import goodsListInfo from '@/components/goods/goods-list-info.vue'
	import cartBottom from '@/components/goods/cart_bottom.vue'
	import lcNumber from '@/components/goods/lc-numberBox.vue'
	import base from '@/api/base'
	export default {
		components:{
		    cgSwiper,orderProgress,cartBottom,lcNumber
		},
		data() {
			return {
				now_address:'',
				swiperList:[],
				swiperPage:0,
				cgSwiperHeight:0,
				cgSwiperOpacity:1,
				listSwiperHeight:0,
				isShowBorder:false,
				inputText:"",//搜索框的值
				is_search_tip:true,
				scrollTop:0,
				goodsList:[],
				isShowSearchBtn:false,
				viewHeightTop:0, //列表距离顶部高度
				refresherStatus: 0,
				selStoreId:0,//是否选择店铺进行商品搜索
				selScsId:0,//选择的社区ID
				selScsLat:0,//选择的社区经度
				selScsLon:0,//选择的社区纬度
				selScsName:'',//选择的社区名称
				store_title:'附近门店'
			}
		},
		onLoad(option) {
			console.log(option)
			console.log(this.$cdn)
		},
		onShow() {
			if(uni.getStorageSync('adminToken') == ''){
				
				this.$uniNavigateTo('../../pages/index/authLogin')
			}
			// else{
			// 	console.log(this.$store.state.adminUser.token)
			// 	if(this.selScsId != 0){
			// 		let postData = {cscId:this.selScsId}
			// 		this.initSwiperData(postData);
			// 	}
			// }
		},
		onReady() {
			this.$store.dispatch('getAddress')
		},
		methods: {
			imgOnLoad(e){
				// debugger
				console.log("高:"+e.detail.height)
				console.log("宽:"+e.detail.width)
			},
			cutGoods(e,item){
				item.num = e
				this.$store.dispatch('delCart',item)
			},
			addGoods(e,item){
				item.num = e
				this.$store.dispatch('addCart',item)
			},
			scrollTopChange(e){
				// console.log(e)
				// console.log(this.scrollTop + " -- " + this.viewHeightTop)
				this.scrollTop= e
				if(this.viewHeightTop == 0){
					this.viewHeightTop += 10
				}
				if(this.scrollTop >= (this.viewHeightTop)){
					this.isShowSearchBtn = true
				}else{
					this.isShowSearchBtn = false
				}
			},
			select_map(){
				let lat = this.selScsLat
				let lon = this.selScsLon
				this.$uniNavigateTo('../../pages/choose-map/choose-map?lat=' + lat +'&lon=' + lon);				
			},
			searchGoods:function(flag){
				let that = this
			
				if(that.selStoreId == 0 && that.inputText == ''){
					this.$commonJs.showToast.showNoneToast('未检索到商品信息')
					
					return false
				}
				
				this.queryList(base.common_pageNum,base.common_pageSize,true);
				//this.defaultGoodsShow(flag)
					
			},
			clickItem:function(e){
				let that = this
				that.isShowBorder = true
				that.selStoreId = e.id
				that.inputText = ''
				this.searchGoods(1)
			},
			//查询商品
			queryList(pageNo, pageSize,flag=false) {
				if(flag == true || pageNo > 1){
					this.$request.queryGoodsList(pageNo, pageSize, this.tabIndex + 1,this.selStoreId,this.selScsId,this.inputText, (data) => {
						//将请求的结果数组传递给z-paging
						if(this.$store.getters.getCartItem.length > 0){
							this.$store.getters.getCartItem.map((item)=>{
								data.unshift(item)
							})
						}
						//每次为第一页时，重新渲染
						if(pageNo == 1){
							this.$refs.paging.reload(data)
						}
						this.$refs.paging.complete(data);
						if(data.length > 0 && pageNo == 1){
							this.defaultGoodsShow()
						}
						
					})
				}else{
					this.$refs.paging.complete([]);
				}
			},
			//设置滚动默认高度
			defaultGoodsShow:function(){
				let that = this
				var miss = 572 ;
				that.viewHeightTop = miss
				that.$refs.paging._scrollToTop(200,null,miss)
				
		// 		var query = wx.createSelectorQuery().in(that);
		// 		query.selectViewport().scrollOffset()
		// 		query.select(".content-list").boundingClientRect();
		// 		query.exec(function (res) {
		// 			console.log(res)

		// 			if(that.listSwiperHeight == 752){
		// 				var miss = res[0].scrollTop + res[1].top - 84 ;
		// 			}else{
		// 				var miss = res[0].scrollTop + res[1].top - 60 ;
		// 			}
		
		// 			console.log(miss)
		// 			that.viewHeightTop = miss
		// 			that.$refs.paging._scrollToTop(200,null,miss)
		// 		});
			
			},
			//加载商家
			initSwiperData(params){
				let that = this
				this.$api.adminStore.adminCStoreList(params)
				.then(res=>{
					if(res.code == 200){
						that.swiperList = [];
						if(res.data.length > 0){
							res.data.map((item,index)=>{
								let json_push	=	{id:item.shopId,text:item.shopName,img:item.shopPic}
								that.swiperList.push(
									Object.assign(json_push)
								)
							})
							this.$store.dispatch('setHomeStoreList',that.swiperList)
							that.swiperPage	=	this.$store.getters.getHomeStorePage
							if(that.swiperList.length <= 3 && that.swiperList.length > 0){
								that.cgSwiperHeight = 200
								that.listSwiperHeight = 752
								that.store_title = '附近门店'
							}else if(that.swiperList.length == 0){
								that.cgSwiperHeight = 0
								that.listSwiperHeight = 0
								that.store_title = '暂无附近门店,请切换社区'
							}else{
								that.cgSwiperHeight = 388
								that.listSwiperHeight = 552
								that.store_title = '附近门店'
							}
						}else{
							that.swiperList = []
							this.$store.dispatch('setHomeStoreList',[])
							that.swiperPage	=	this.$store.getters.getHomeStorePage
							that.cgSwiperHeight = 0
							that.listSwiperHeight = 0
							that.store_title = '暂无附近门店,请切换社区'
							this.$store.dispatch('clearnCart')
							that.isShowBorder = false
						}
					}else{
						this.$commonJs.showToast.showNoneToast(res.msg)
					}
				})
				.catch(err=>{
					this.$commonJs.showToast.showNoneToast(err)
				})
			},
			getFocus (val) {
				let that = this
				that.set_search_tip();
			},
			getBlur(val){
				let that = this
				that.set_search_tip();
			},
			changeVal(val) {
				let that = this
				this.inputText = val.detail.value;
				that.set_search_tip();
			},
			set_search_tip:function(){
				if (this.inputText != '') {
					this.is_search_tip = false
				}else{
					this.is_search_tip = true
				}
			},
			detail(item, e) {
				this.$emit("clickItem", item, e);
			},
			goToPayOrder(){
				let cartItem = this.$store.getters.getCartItem
				if(cartItem.length <= 0){
					this.$commonJs.showToast.showNoneToast('未选择任何商品无法进行下单')
					return false
				}
				console.log(cartItem)
				let navigateParam = JSON.stringify(cartItem)
				debugger
				this.$uniNavigateTo('../../pages/order/confirm-order/confirm-order?cartItemList=' + navigateParam + '&money='+this.$store.state.goodsCart.shopCart.totalMoney)
			}
		},
		computed:{
			newAddress(){
				// let returnAddressInfo = {address:this.$store.state.txMap.address,lat:this.$store.state.txMap.latitude,lon:this.$store.state.txMap.lontitude}
				let that = this
				that.selScsId = this.$store.state.txMap.scsId
				that.selScsLat = this.$store.state.txMap.latitude
				that.selScsLon = this.$store.state.txMap.lontitude
				that.selScsName = this.$store.state.txMap.address
				// return this.$store.state.txMap.address
			},
			cartItem(){
				return this.$store.state.goodsCart.shopCart.items
			},
			cartNumber(){
				return this.$store.state.goodsCart.shopCart.totalNum
			},
			cartMoney(){
				return this.$store.state.goodsCart.shopCart.totalMoney
			},
			getSwiperData(){
				if(this.selScsId != -1){
					let postData = {cscId:this.selScsId}
					this.initSwiperData(postData);
				}
			}
		},
		watch:{
			selScsId:function(newVal,oldVal){
				this.queryList(base.common_pageNum,base.common_pageSize,false)
			}
		}
	}
</script>

